{extend name="public/base" /}

{block name="css"}
<style>
    .logo {
        width: 92px;
        height: 92px;
        margin: 0 10px 10px 0;
    }
</style>
{/block}

{block name="title"}分类{/block}

{block name="main"}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input" value="{$data.name|default=''}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">图片</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="logo_btn">上传图片</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img logo" id="logo" src="{$data.image|default=''}">
                            <p id="demoText" style=" display: inline-block;"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上级分类</label>
                <div class="layui-input-inline">
                    <select name="pid" lay-filter="aihao">
                        <option value="0">顶级分类</option>
                        {volist name="cates" id="vo"}
                        <option value="{$vo.id}" {eq name="vo.id" value="$data.pid|default=''"} selected {/eq}>{:str_repeat('&nbsp;&nbsp;&nbsp;', $vo.level * 2)}{$vo.name}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="hidden" name="image" value="{$data.image|default=''}" />
                    <input type="hidden" name="id" value="{$data.id|default=''}" />
                    <button class="layui-btn" lay-submit lay-filter="send_form">立即提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
{/block}

{block name="js"}
<script>
    layui.use(['form', 'layer', 'upload', 'admin'], function(){
        var $ = layui.jquery
            , layer = layui.layer
            , admin = layui.admin
            , form = layui.form
            , upload = layui.upload;

        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

        form.on('submit(send_form)', function(data){
            admin.req({
                url: "{:url('save_category')}" //实际使用请改成服务端真实接口
                ,data: data.field
                ,done: function(res){
                    //登入成功的提示与跳转
                    layer.msg('保存成功', {
                        offset: '15px'
                        ,icon: 1
                        ,time: 1000
                    }, function(){
                        parent.layer.close(index);
                        parent.location.reload();
                    });
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#logo_btn'
            ,url: '{:url("common/upload_img")}'
            ,before: function(obj){
                layer.load();
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#logo').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                layer.closeAll();
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                layer.msg('上传成功！', {icon : 1});
                $("input[name='image']").val(res.data.src);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });
</script>
{/block}